<!--
 * @FilePath     : /study_code/layui/12-6-4.html
 * @Description  : layui api form.validate() 主动触发表单校验
 * @Date         : 2025-04-07 16:07:21
 * @Author       : Fang YingGui
 * @LastEditors  : fangyinggui 18715384437@163.com
 * @LastEditTime : 2025-04-07 16:41:20
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>documentName</title>
    <link rel="stylesheet" href="/layui/dist/css/layui.css" />
  </head>
  <body>
    <form class="layui-form" action="">
      <input
        type="text"
        name="username"
        lay-verify="required|username"
        placeholder="用户名"
        class="layui-input"
        value="lotut"
      />
      <hr />
      <input
        type="password"
        name="password"
        lay-verify="password"
        placeholder="密码"
        class="layui-input"
        value="12345"
        id="myPwd"
      />
      <hr />
      <input type="text" name="motto" lay-verify="motto" placeholder="座右铭" class="layui-input" />
      <hr />
      <button class="layui-btn" lay-submit lay-filter="demo-verify">提交</button>
    </form>

    <hr />

    <button id="btn1">手动触发校验</button>

    <script src="/layui/dist/layui.js"></script>
    <script>
      layui.use(['form', 'jquery'], function () {
        var form = layui.form,
          $ = layui.$

        // 自定义验证规则
        form.verify({
          // 验证密码
          password: function (value, elem) {
            if (!/^[\S]{6,16}$/.test(value)) {
              // return '密码必须为 6 到 16 位的非空字符'

              layer.msg('密码必须为 6~16 位的非空字符')
              return true
            }
          },
        })

        // 手动触发校验
        $('#btn1').on('click', function () {
          form.validate('#myPwd')
        })
      })
    </script>
  </body>
</html>
